<template>
    <img v-if="icon && isImage" :src="icon" class="icon-style" />
    <u-icon v-else-if="icon" :name="icon" size="32" />
</template>
<script>
    import { defineComponent, computed } from 'vue'

    export default defineComponent({
        name: 'alUIcon',
        props: {
            icon: {
                type: String,
                default: ''
            }
        },
        setup(props) {
            const isImage = computed(() => {
                return props.icon.startsWith('data:') || props.icon.startsWith('http')
            })
            return {
                isImage
            }
        }
    })
</script>
<style lang="less" scoped>
    .icon-style {
        width: 32rpx;
        height: 32rpx;
        display: block;
    }
</style>
